




<!DOCTYPE html>

<style>
		.loading{
			background-color: #;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 1;
			margin-top: 0px;
			top: 0px;
			left: 0px;

			
		}
		.loading-center{
			width: 100%;
			height: 100%;
			position: relative;
	
			overflow:scroll;
			
		}
		.loading-center-absolute {
			position: absolute;
			left: 10%;
			top: 20%;
			height: 100%;
			width: 100%;
			margin-top: -100px;
			margin-left: -100px:

		}
		
		<!--.name:hover
		{
		background-color:#E71B1B;
		border:none;
		}-->
		.name1
		{
		transform:translate(50%,50%);
		}
		.location1
		{
		transform:translate(48%,50%);
		}
		.age1
		{
		transform:translate(51%,50%);
		}
		.phone
		{
		transform:translate(44%,50%);
		}
		.logbtn
		{
		transform:translate(400px,-200px)
		}
		.image
		{
		background-image:url("../images/1.jpg");
		position:fixed;
		height:100%;
		width:100%;
		size:auto;
		margin-top:0px;
		background-repeat:no-repeat;
		background-size:cover;
		opacity:0.8;
		
		}
	
</style>
<html>
<body>
 <div class ="image">

<div class="loading">

		<div class="loading-center">
	
		  <div class="loading-center-absolute">


<form th:action="@{/registration/save-contact}" method="post" th:object="${userData}">
 <input type="submit" value="Submit">
<h1 align="">USER REGISTRATION</h1>	
<div class="">
  First Name  : <input type="text" name="firstName" placeholder="FirstName" required="" th:field="*{user.firstName}"> </div><br>
  Last Name  : <input type="text" name="lastName" placeholder="LastName" required="" th:field="*{user.lastName}"><br><br>
 <div class="">
 
 Email Id :<input type="email"  name="email" placeholder="Email Id" required="" th:field="*{user.email}"><br><br>
  Password :<input type="password" name="password" placeholder="Password" required="" th:field="*{user.password}"><br><br>
  Confirm Password :<input type="password" name="confpword" placeholder="Confirm Password" required=""><br><br>
 Location : <input type= "text" name="location" placeholder="Location" required="" th:field="*{user.locality}"></div> <br>
 
 <div class="">
 Phone Number : <input type="text" name="phnum" placeholder="Phone Number" pattern="[0-9]{10}" required="" th:field="*{user.mobile}"></div><br>
   <h2 align="">OTHER DETAILS</h2>  
  <!--  <button class="orange"  id="text" onclick="fun();">Add More</button> 
	<div id="contact" style="display:none;"> -->

		<div th:each="contact, itemStat: *{contacts}">
		Trusted Contact  : First Name :<input type="text" placeholder="FirstName" th:field="*{contacts[__${itemStat.index}__].firstName}">
   		Last Name :<input type="text" placeholder="LastName" th:field="*{contacts[__${itemStat.index}__].lastName}"> 
   		Relation : <input type="text" placeholder="Relation" th:field="*{contacts[__${itemStat.index}__].relation}">
   		Phone Number : <input type="text" placeholder="Phone Number" th:field="*{contacts[__${itemStat.index}__].phoneNumber}"><br>
		</div>
	 </div>	
	 </div>
	 <div class="">
	
	 </div>
</form>
	<!--  <script>
	function fun()
	{
	
		ele=document.getElementById("contact");
		
		ele.style='display:block';
	
		 
	}

</script>
   
  <input type="submit" value="Submit">
</form>
<form action="index.html" method="POST">
<input type="submit" value="logout" class="logbtn"></form>
</script>-->
   
 
<!--  form action="index.html" method="POST">
<input type="submit" value="logout" class="logbtn"></form>-->
</div>
</div>
</div>
</div>
</body>
</html>
